<template>
    <div>
     <h1>门店修改</h1>
     <table class="table table--bordered">
        <tbody>
            <tr>
                <td align="right">门店名称</td>
                <td>
                    <input type="text" v-model="info.ShopName" disabled>
                </td>
            </tr>
            <tr>
                <td align="right">分店名称</td>
                <td>
                    <input type="text" v-model="info.BranchName" disabled>
                </td>
            </tr>
            <tr>
                <td align="right">分店地址</td>
                <td>
                    <input type="text" v-model="info.Address" disabled>
                </td>
            </tr>
            <tr>
                <td align="right">门店图片</td>
                <td>
                    <input type="file" @change="img" disabled>
                    <img :src="info.Photo" width="100" height="100" v-if="info.Photo!=''">
                </td>
            </tr>
            <tr>
                <td align="right">客服电话</td>
                <td>
                    <input type="text" v-model="info.Phone" maxlength="11" disabled>
                </td>
            </tr>
            <tr>
                <td align="right">门店状态</td>
                <td>
                    <input type="radio" name="1" v-model="info.State" :value="1" disabled>启用
                    <input type="radio" name="1" v-model="info.State" :value="0" disabled>禁用
                </td>
            </tr>
            <tr>
                <td align="right">门店介绍</td>
                <td>
                    <textarea cols="50" row="5" v-model="info.Desc"  disabled></textarea>
                </td>
            </tr>
            <tr>
                <td align="right">注意事项</td>
                <td>
                    <textarea cols="50" row="5" v-model="info.Notice" disabled></textarea>
                </td>
            </tr>
            <tr>
                <td align="right">交通信息</td>
                <td>
                    <textarea cols="50" row="5" v-model="info.Traffic" disabled></textarea>
                </td>
            </tr>          
        </tbody>
     </table>
    </div>
</template>

<script setup lang="ts">
//响应式数据
import {ref,reactive,onMounted} from 'vue';
import axios from 'axios';
import moment from 'moment';
//跳转
import {useRouter,useRoute} from 'vue-router';
const router=useRouter();
const route=useRoute();


//声明变量存储向后端添加时发送的数据
let info:any=reactive({
  "ShopName": "",
  "BranchName": "",
  "Address": "",
  "Photo": "",
  "Phone": "",
  "State": 1,
  "Desc": "",
  "Notice": "",
  "Traffic": "",
})
//生命周期函数
onMounted(()=>{
    detail();
})
//----------图片上传-------
const img=(e:any)=>{
    //获取你上传的图片
    let obj=e.target.files[0];
    //将上传的图片转成FormData格式
    let f =new FormData();
    f.append('file',obj);

    axios({
        url:'https://localhost:7193/api/Imgs/Imgs',
        method:'post',
        data:f,
    })
    .then((res)=>{
        console.log(res);
        if(res.data=='不是图片'){
            alert('上传的不是图片');
            return;
        }
        if(res.data=='图片大于2M'){
            alert('图片大于2M');
            return;
        }

        info.Photo=res.data;
    })
}
//实现数据反填
const detail=()=>{
    axios({
        url:'https://localhost:7193/api/Shop/FtShop',
        method:'get',
        params:{
            id:route.query.id
        }
    })
    .then(res=>{
        console.log(res);
        Object.assign(info,res.data);
    })
    .catch(err=>{
        console.log(err);
    })

}
//------------------修改----------------------

const ok=()=>{
    if(info.ShopName==''){
        alert('门店名称不能为空');
        return;
    }
    if(info.BranchName==''){
        alert('分店名称不能为空');
        return;
    }
    if(info.Address==''){
        alert('地址不能为空');
        return;
    }
    if(info.Photos==''){
        alert('图片不能为空');
        return;
    }
    if(info.Phone==''){
        alert('电话不能为空');
        return;
    }
    let reg=/^1[3-9]\d{9}$/;
    if(reg.test(info.Phone)==false)
    {
         alert('手机号格式不正确');
         return;
    }
    axios({
        url:'https://localhost:7193/api/Shop/UpdateShop',
        method:'put',
        data:info,
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0){
            alert('修改成功');
            router.push('/shoplist');
        }
        else if(res.data==-1)
        {
            alert('门店名称重复');
            return;
        }
        else{
            alert('修改失败');
            return;
        }

    })
}
</script>

<style scoped>

</style>